import CommonTable from "@/pages/OrderModule/common/components/CommonTable/components/CommonTable";
import CommonText from "@/pages/OrderModule/common/components/CommonText/CommonText";
import { Alert, Button, Popover, Space, Tag, Popconfirm, message } from "antd";
import { memo, useState, useEffect } from "react";
import NewPackagingStrategy from "./NewPackagingStrategy";
import CommonZjfImg from "@/components/CommonImg/ZifComponent";
import { packagingStrategyList, updateStatusSackagingStrategyOp, deletePackagingStrategyOp } from "../../service";
import CommonLoading from "@/components/CommonLoading";
import { labelColorMap } from "@/utils/config";

const TagIntelligentPackaging = ({ type }) => {
	const [tableData, setTableData] = useState([]); //表格数据
	const [visible, setVisible] = useState(false); //新增/编辑弹窗
	const [visibleType, setVisibleType] = useState("add"); //弹窗的状态
	const [recordData, setRecordData] = useState({}); //单行的数据
	const [loading, setLoading] = useState(false);

	const [imageShowConfig, setImageShowConfig] = useState({
		image: "small",
		info: ["name", "color", "goods", "style"],
		all: false
	});

	useEffect(() => {
		if (type == 2) {
			getPackagingStrategyList();
		}
	}, [type]);

	//查询表格数据
	const getPackagingStrategyList = async () => {
		setLoading(true);
		setTableData([]);
		const { success, data = [] } = await packagingStrategyList({
			current: 1,
			size: 500
		});
		if (success) {
			setTableData(data);
		}
		setLoading(false);
	};

	//修改状态
	const handleUpdateStatus = async record => {
		setLoading(true);
		const { msg = "", success } = await updateStatusSackagingStrategyOp({ id: record.id, status: record.status == 1 ? 0 : 1 });
		if (success) {
			message.success(msg);
			getPackagingStrategyList();
		}
		setLoading(false);
	};

	//删除当前数据
	const handleDeleteItems = async record => {
		setLoading(true);
		const { msg = "", success } = await deletePackagingStrategyOp({ id: record.id });
		if (success) {
			message.success(msg);
			getPackagingStrategyList();
		}
		setLoading(false);
	};

	//单行点击编辑
	const handleEditItem = (record, type) => {
		setVisible(true);
		setRecordData(record);
		setVisibleType([type]);
	};

	const tableColumns = [
		{
			title: "序号",
			dataIndex: "index",
			key: "index",
			width: 60,
			render: (t, r, i) => i + 1
		},
		{
			title: "策略名称",
			dataIndex: "name",
			key: "name",
			width: 120
		},
		{
			title: "优先级",
			dataIndex: "level",
			key: "level",
			width: 100
		},
		{
			title: "店铺",
			dataIndex: "ecStoreNames",
			key: "ecStoreNames",
			width: 120,
			render(text) {
				return <div>{text.length ? text.join("，") : "/"}</div>;
			}
		},
		{
			title: "包含标签",
			dataIndex: "labelConfigList",
			key: "labelConfigList",
			width: 120,
			render(text) {
				return (
					<>
						{text.length
							? text.map(item => (
									<Tag style={{ marginBottom: "2px" }} key={item.id} color="gold">
										{labelColorMap[item.name] ? labelColorMap[item.name] : item.name}
									</Tag>
								))
							: "/"}
					</>
				);
			}
		},
		{
			title: "包含商品",
			dataIndex: "goodsRange",
			key: "goodsRange",
			width: 100,
			render(text) {
				return <div>{text == 1 ? "所有商品" : "指定商品"}</div>;
			}
		},
		{
			title: "包装",
			dataIndex: "packageInfo",
			width: 220,
			render: (text, record, i) => (
				<span>
					<div style={{ display: "flex" }}>
						<CommonZjfImg storeId={text.storeId} img={text.packageImage} />
						<div style={{ marginLeft: "8px", width: "190px" }}>
							<div>{text.packageName}</div>
							<div style={{ display: "flex", justifyContent: "space-between" }}>
								<div style={{ display: "flex" }}>
									<div style={{ marginRight: "8px" }}>{text.packageSize}</div>
									<div>{text.packageColor}</div>
								</div>
								<div className="common-color9">¥{text.packagePrice}</div>
							</div>
						</div>
					</div>
				</span>
			)
		},
		{
			title: "状态",
			dataIndex: "status",
			key: "status",
			width: 100,
			render(value) {
				return <CommonText text={value ? "已开启" : "未开启"} type={value ? "success" : "error"} />;
			}
		},
		{
			title: "操作",
			width: 200,
			render: (text, record) => {
				return (
					<>
						<Button onClick={() => handleEditItem(record, "edit")} type="link" size="small">
							编辑
						</Button>
						<Popconfirm
							title={`确定${record.status == 1 ? "关闭" : "开启"}?`}
							onConfirm={() => handleUpdateStatus(record)}
							okText="确定"
							cancelText="取消"
						>
							<Button type="link" size="small">
								{record.status == 1 ? "关闭" : "开启"}
							</Button>
						</Popconfirm>
						<Popconfirm title="确定删除?" onConfirm={() => handleDeleteItems(record)} okText="确定" cancelText="取消">
							<Button type="link" size="small">
								删除
							</Button>
						</Popconfirm>
					</>
				);
			}
		}
	];

	//新增/编辑包装策略
	const NewPackagingStrategyProps = {
		visible,
		type: visibleType,
		recordData,
		handleCancel() {
			setVisible(false);
			setVisibleType("add");
			setRecordData({});
		},
		handleOk() {
			getPackagingStrategyList();
			setVisible(false);
			setVisibleType("add");
			setRecordData({});
		}
	};

	return (
		<Space direction="vertical" size={20}>
			<Alert message="满足以下策略条件的订单，会按照优先级读取最高优先级的包装" type="info" showIcon />
			<Button onClick={() => setVisible(true)}>新增包装策略</Button>
			<CommonTable columns={tableColumns} dataSource={tableData} pagination={false} scroll={{ y: 500 }} rowKey={"id"} />
			{visible && <NewPackagingStrategy {...NewPackagingStrategyProps} />}
			<CommonLoading loading={loading} />
		</Space>
	);
};
export default memo(TagIntelligentPackaging);
